<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>货区</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .cell{
            text-align: center;
        }
        .is-leaf{
            color: rgb(111, 174, 217);
        }
        h3 a{
            text-decoration: none;
            color: black;
        }
        <!---->
    </style>
</head>
<body>
    <h3>
        <a href="">库区管理</a>
    </h3>
    <div id="app">
        <template>
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="仓库名称">
                    <el-select v-model="warehouse.wareId" @change="findWare(warehouse.wareId)" style="width: 150px;" clearable placeholder="请选择仓库">
                        <el-option
                                v-for="item in menus"
                                :key="item.id"
                                :label="item.wareName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="货区名称">
                    <el-select v-model="warehouse.id" style="width: 150px;" @change="wareChange(warehouse.id)" clearable placeholder="请选择货区">
                        <el-option
                                v-for="item in menuWarehouses"
                                :key="item.id"
                                :label="item.goodsName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-col>
                        <el-date-picker
                                @change="dateChange(date)"
                                type="date"
                                placeholder="选择日期"
                                v-model="date"
                                style="width: 145px;"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="find">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button style="margin: 10px 0;" icon="el-icon-plus" type="primary" size="mini" @click="dialogFormVisible = true">新增库区</el-button>
            <el-dialog title="库区操作" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog()">
                <el-form :model="warehouse" label-width="80px">
                    <el-form-item label="货区编号">
                        <el-input v-model="warehouse.goodsNo"></el-input>
                    </el-form-item>
                    <el-form-item label="货区名称">
                        <el-input v-model="warehouse.goodsName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库名称">
                        <el-select v-model="warehouse.wareId" style="" clearable placeholder="请选择仓库">
                            <el-option
                                    v-for="item in menus"
                                    :key="item.id"
                                    :label="item.wareName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="货架数目">
                        <el-input v-model="warehouse.shelvesNum" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="区域面积">
                        <el-input v-model="warehouse.area" placeholder="/平方米" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="warehouse.describes" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveWarehouse()">确 定</el-button>
                </div>
            </el-dialog>
            <el-table
                    :data="warehouses"
                    style="width: 100%"
                    :default-sort = "{prop: 'id', order: 'ascending'}"
                    :border="border">
                <el-table-column prop="id" label="库区id" sortable>
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货区编号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.goodsNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货区名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.goodsName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属仓库" width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.menu.wareName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货架数目" width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.shelvesNum }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="dateTime" label="创建时间" sortable width="200">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.dateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="area" label="区域面积" sortable>
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.area }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="描述">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.describes }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status"
                                active-text="启用"
                                active-color="#13ce66"
                                @change="wareStatus(scope.row.id,scope.row.status,scope.row.menu.status)"
                                inactive-text="禁用" style="font-size: 12px"
                                :disabled="!scope.row.menu.status">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
                        <el-popconfirm icon-color="red" title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
                            <el-button size="mini" icon="el-icon-delete" type="danger" slot="reference"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 10px;">
                <el-pagination @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="page_size"
                               :page-size="4"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="count"
                               :background="back">
                </el-pagination>
            </div>
        </template>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data(){
          return{
              // 当前页数
              currentPage: 1,
              // 库区总数
              count : 0,
              // 每页的数据
              page_size : [5,10],
              // 当前每页的数据
              pageSize : 5,
              // 分页背景
              back: true,
              // 表格边框
              border: true,
              // 所有库区
              warehouses: [],
              warehouse: {},
              // 仓库id查询到的库区
              menuWarehouses: [],
              // 仓库
              menus: [],
              // 修改库区模态框
              dialogFormVisible: false,
              // 区分添加和更新库区
              flag: 0,
              wareId: "",
              // 货区创建日期
              date: null,
              // 按条件查询是使用的仓库名和获取名对应的id
              // 仓库id
              menuId: 0,
              // 货区id
              wareId1: 0,
          }
        },
        methods: {
            dateChange(date){
                if (date == null){
                    return;
                }
                this.date = this.date;
            },
            // 加载库区
            loadWarehouse(){
                axios.get("/warehouses/"+this.currentPage+"/"+this.pageSize+"?menuId=" + this.menuId + "&wareId=" + this.wareId1 + "&date=" + this.date)
                    .then(res => {
                        this.warehouses = res.data.data;
                        this.count = res.data.count;
                    })
            },
            // 加载仓库
            loadMenus(){
                axios.get("/menus")
                    .then(res => {
                        this.menus = res.data;
                    })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadWarehouse();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadWarehouse();
            },
            //清空修改角色模态框数据
            closeDialog() {
                this.flag = 0;
                this.warehouse = {};
            },
            // 更新,添加库区
            saveWarehouse() {
                if(this.flag == 0){
                    axios.post("/warehouse", this.warehouse)
                        .then(res => {
                            if(res.data == "ok"){
                                this.loadWarehouse();
                            }
                        });
                }else {
                    axios.put("/warehouse", this.warehouse)
                        .then(res => {
                            if(res.data == "ok"){
                                this.loadWarehouse();
                            }
                        });
                }
                this.dialogFormVisible = false;
            },
            // 更新库区
            handleEdit(index, row) {
                this.warehouse = row;
                this.flag = 1;
                this.dialogFormVisible = true;
            },
            // 删除库区
            handleDelete(index, row) {
                if(this.warehouses.length == 1){
                    this.currentPage = this.currentPage - 1;
                }
                axios.delete("/warehouse/" + row.id)
                    .then(res => {
                        if(res.data == "ok"){
                            this.loadWarehouse();
                        }
                    });
            },
            // 更新库区状态
            wareStatus(id,status,menuStatus){
                axios.put("/warehouse/" + id + "/" + status)
                    .then(res => {
                        if(res.data == "ok"){
                            this.$message({
                                type: "success",
                                message: "更新成功"
                            })
                        }
                    })
            },
            // 根据仓库id查询货区
            findWare(id){
                this.menuId = id;
                if(id.length == 0){
                    this.menuWarehouses = "";
                    this.menuId = 0;
                    return;
                }
                axios.get("/warehouses/"+id)
                    .then(res => {
                        this.menuWarehouses = res.data;
                    })
            },
            wareChange(id){
                if(id.length == 0){
                    this.wareId1 = 0;
                    return;
                }
                this.wareId1 = id;
            },
            // 按条件查询库区
            find(){
                this.loadWarehouse();
            }
        },
        mounted(){
            this.loadWarehouse();
            this.loadMenus();
        }
    });
</script>
</html>